<template>
  <div class="flex flex-wrap gap-4 mt-8">
    <!-- rounded-none -->
    <ABadge
      class="rounded-none"
      content="9"
    >
      <i class="i-bx-bell w-6 h-6" />
    </ABadge>

    <!-- rounded-sm -->
    <ABadge
      class="rounded-sm"
      content="9"
    >
      <i class="i-bx-bell w-6 h-6" />
    </ABadge>

    <!-- rounded-md -->
    <ABadge
      class="rounded-md"
      content="9"
    >
      <i class="i-bx-bell w-6 h-6" />
    </ABadge>

    <!-- rounded-lg -->
    <ABadge
      class="rounded-lg"
      content="9"
    >
      <i class="i-bx-bell w-6 h-6" />
    </ABadge>

    <!-- default -->
    <ABadge content="9">
      <i class="i-bx-bell w-6 h-6" />
    </ABadge>
  </div>
</template>
